<template>
	<el-row>
		<el-col :span="4" :offset="4">
			
			<el-select v-if="this.receivedClass=='agency'" v-model="receivedIdValue" filterable class="m-2" placeholder="部门" size="large" @change="switchChatEId">
				<el-option
				v-for="item in receivedObjects"
				:key="item"
				:label="item.dpName"
				:value="item.dpId"
				/>
			</el-select>
			<el-select v-if="this.receivedClass=='person'" v-model="receivedIdValue" filterable class="m-2" placeholder="个人" size="large" @change="switchChatEId">
				<el-option
				v-for="item in receivedObjects"
				:key="item"
				:label="item.ename"
				:value="item.eid"
				/>
			</el-select>
		</el-col>
		<el-col :span="4" :offset="8">
			<el-date-picker
				v-model="dateValue"
				type="date"
				placeholder="Pick a day"
				size="default"
				style = "width:100%"
				@change="dateChange"
			/>
		</el-col>
	</el-row>
	<br />
	<el-row>
		<el-col :span="16" :offset="4">
			<el-tabs type="border-card" v-model="tabValue" @tab-click="switchChatClass">
				<el-tab-pane label="部门交流" name="agency"/>
				<el-tab-pane label="个人交流" name="person"/>
				<el-row >
					<el-col :span="24" v-if="this.receivedClass=='agency'">
						<el-row>
							<el-col :span="24" class="chatBox agency">
								<el-row v-for="messages in subReceivedMessages" :key="messages" >
									<el-col :span="24">
										<el-row>
											<el-col :span="3">发送人名称：</el-col>
											<el-col :span="4">{{receivedEmployee.ename}}</el-col>
											<el-col :span="3" :offset="2">时间：</el-col>
											<el-col :span="8">{{dateFormat(messages.smTime)}}</el-col>
											<el-divider />
											<el-col :span="24">{{messages.smContent}}</el-col>
										</el-row>
										<br />
									</el-col>
								</el-row>
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="24" v-if="this.receivedClass=='person'">
						<el-row>
							<el-col :span="24" class="chatBox person">
								<el-row v-for="messages in subReceivedMessages" :key="messages" >
									<el-col :span="24">
										<el-row>
											<el-col :span="3">发送人名称：</el-col>
											<el-col :span="4">{{receivedEmployee.ename}}</el-col>
											<el-col :span="3" :offset="2">时间：</el-col>
											<el-col :span="8">{{dateFormat(messages.smTime)}}</el-col>
											<el-divider />
											<el-col :span="24">{{messages.smContent}}</el-col>
										</el-row>
										<br />
									</el-col>
								</el-row>
							</el-col>
											<el-divider />
							<el-col :span="24" class="chatBox person">
								<el-row v-for="messages in subSentMessages" :key="messages" >
									<el-col :span="24">
										<el-row>
											<el-col :span="3">接收人名称：</el-col>
											<el-col :span="4">{{receivedEmployee.ename}}</el-col>
											<el-col :span="3" :offset="2">时间：</el-col>
											<el-col :span="8">{{dateFormat(messages.smTime)}}</el-col>
											<el-divider />
											<el-col :span="24">{{messages.smContent}}</el-col>
										</el-row>
										<br />
									</el-col>
								</el-row>
							</el-col>
							<el-col :span="24">
							</el-col>
						</el-row>
					
					</el-col>
				</el-row>
			</el-tabs>
		
		</el-col>
	</el-row>

</template>
<script>
//import {ElMessage} from 'element-plus'
//import qs from 'qs'
import { ref } from 'vue'
export default {
	data () {
		return {
			dateValue:ref(''),
			tabValue:"person",
			receivedMessages:[],
			subReceivedMessages:[],
			sentMessages:[],
			subSentMessages:[],
			employees:[],
			departments:[],
			receivedClass:"",
			receivedObjects:[],
			receivedEmployee:{},
			receivedIdValue : ref(1),
		}
	},
	methods:{
		dateFormat(time) {
			var date=new Date(time);
			var year=date.getFullYear();
			/* 在日期格式中，月份是从0开始的，因此要加0
			* 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
			* */
			var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
			var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
			var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
			var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
			var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
			// 拼接
			return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
		},
		datePrecisionToDate(time){
			var date=new Date(time);
			/* 在日期格式中，月份是从0开始的，因此要加0
			* 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
			* */
			var year=date.getFullYear();
			var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
			var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
			return year+"-"+month+"-"+day
		},
		dateChange(){
			this.subSentMessages = []
			if(this.tabValue=="agency"){
				for(let i = 0;i<this.sentMessages.length;i++){
					if(this.datePrecisionToDate(this.dateValue)==this.datePrecisionToDate(this.sentMessages[i].smTime)){
						this.subSentMessages.push(this.sentMessages[i])
					}
				}
			}
			
			if(this.tabValue=="person"){
				this.subReceivedMessages = []
				for(let i = 0;i<this.sentMessages.length;i++){
					if(this.datePrecisionToDate(this.dateValue)==this.datePrecisionToDate(this.sentMessages[i].smTime)){
						this.subSentMessages.push(this.sentMessages[i])
					}
				}
				for(let i = 0;i<this.receivedMessages.length;i++){
					if(this.datePrecisionToDate(this.dateValue)==this.datePrecisionToDate(this.receivedMessages[i].smTime)){
						this.subReceivedMessages.push(this.receivedMessages[i])
					}
				}
			}
		},
		switchChatClass(tab) {
			if(tab.props.name=="agency"){
				this.receivedClass = "agency"
				this.receivedObjects = this.departments
			}
			else{
				this.receivedClass = "person"
				this.receivedObjects = this.employees
			}
			console.log(this.receivedClass)
		},
		switchChatEId(){
			let that = this
			this.$axios.get("http://localhost:8080/E/selectEOneByEId",{
				params:{
					eId:that.receivedIdValue,
				}
			}).then(function(res){
				console.log(res.data)
				that.receivedEmployee = res.data
			})
			this.$axios.get("http://localhost:8080/SM/selectSMListByEIdAndRClassAndRId",{
				params:{
					eId:that.$store.state.eId,
					receivedClass:that.receivedClass,
					receivedId:that.receivedIdValue
				}
			}).then(function(res){
				console.log(res.data)
				that.sentMessages = res.data
				that.subSentMessages = res.data.slice(res.data.length-10>0?res.data.length-10:0,res.data.length)
			})
			this.$axios.get("http://localhost:8080/SM/selectSMListByEIdAndRClassAndRId",{
				params:{
					eId:that.receivedIdValue,
					receivedClass:that.receivedClass,
					receivedId: that.$store.state.eId
				}
			}).then(function(res){
				console.log(res.data)
				that.receivedMessages = res.data
				that.subReceivedMessages = res.data.slice(res.data.length-10>0?res.data.length-10:0,res.data.length)
			})
		},
		switchChatDpId(){
			
			let that = this
			//获取在当前部门中发送了消息的员工
			this.$axios.get("http://localhost:8080/E/selectEOneByDpId",{
				params:{
					dpId:that.receivedIdValue,
				}
			}).then(function(res){
				console.log(res.data)
				that.sentEmployee = res.data
			})
			this.$axios.get("http://localhost:8080/SM/selectSMListByRClassAndRId",{
				params:{
					receivedClass:that.receivedClass,
					receivedId:that.receivedIdValue
				}
			}).then(function(res){
				console.log(res.data)
				that.sentMessages = res.data
				that.subSentMessages = res.data.slice(res.data.length-10>0?res.data.length-10:0,res.data.length)
			})
		},
	},
	mounted() {
	//显示当前日期时间
		let _this = this// 声明一个变量指向Vue实例this，保证作用域一致
		this.timer = setInterval(() => {
			_this.date = new Date(); // 修改数据date
		}, 1000)
	},
	beforeUnmount() {
		if (this.timer) {
			clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
		}
	},
	created(){
		
		this.receivedClass = "person"
		let that = this
		this.$axios.get("http://localhost:8080/E/selectEList").then(function(res){
			that.employees = res.data
			that.receivedObjects = that.employees
		})
		this.$axios.get("http://localhost:8080/DP/selectDPList").then(function(res){
			that.departments = res.data
			that.receivedObjects = that.departments
		})
	}
}
</script>

<style>
	.chatBox{
		overflow-y: scroll;
	}
	.person{
		height: 200px;
	}
	.agency{
		height: 400px;
	}
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.text {
		font-size: 14px;
	}
	
	.item {
		margin-bottom: 18px;
	}
	
	.box-card {
		width: 200px;
	}
</style>
